import Ad from '_shared/Ad';
import Example from '_shared/Example';
import PageMeta from '_shared/PageMeta';
import LinkedComponents from '_shared/LinkedComponents';
import { Hidden } from '@material-ui/core';

import * as BasicDateRangePicker from './BasicDateRangePicker.example';
import * as ResponsiveDateRangePicker from './ResponsiveDateRangePicker.example';
import * as MinMaxDateRangePicker from './MinMaxDateRangePicker.example';
import * as CalendarsDateRangePicker from './CalendarsDateRangePicker.example';
import * as StaticDateRangePicker from './StaticDateRangePicker.example';
import * as CustomRangeInputs from './CustomRangeInputs.example';

<PageMeta component="DateRangePicker" />

## Date range picker

> ⚠️⚠️ The date range picker is unstable, it's **not suitable** for usage in production. ⚠️⚠️

> The date range picker will be made available in the coming months for production use as part of a paid extension to the community edition (MIT license) of Material-UI.
> This paid extension will include advanced components (rich data grid, date range picker, tree view drag & drop, etc.). Pricing for early access will start with an affordable plan.

The [date range pickers](https://material.io/components/pickers/) let users select a range of dates.

<Ad />

#### Basic usage

Basic DateRangePicker example, make sure that you can pass almost any prop of [DatePicker]('/api/DatePicker')

<Example source={BasicDateRangePicker} />

#### Responsiveness

The date range picker component is designed and optimized for the device it runs on.

- The "Mobile" version works best for touch devices and small screens.
- The "Desktop" version works best for mouse devices and large screens.

By default, the `DateRangePicker` component uses a `@media (pointer: fine)` media query to determine which version to use.
This can be customized by `desktopModeMediaQuery` prop.

<Example source={ResponsiveDateRangePicker} />

#### Different amount of calendars

Make sure that `calendars` prop is working only for desktop mode.

<Example source={CalendarsDateRangePicker} />

#### Disabling dates

Disabling dates performs just like in simple `DatePicker`

<Example source={MinMaxDateRangePicker} />

#### Custom input component

You can customize rendering input by `renderInput` prop. For `DateRangePicker` it takes **2** parameters – for start and end input respectively.
So if you need to render custom input make sure you will spread `ref` and `inputProps` correctly to the input components.

<Example source={CustomRangeInputs} />

#### Static mode

It is possible to render any picker without modal or popper. For that use `StaticDateRangePicker`.

<Hidden smDown>
  <Example paddingBottom source={StaticDateRangePicker} />
</Hidden>

#### API

<LinkedComponents components={['DateRangePicker']} />
